<template>
  <div>
    <h1>HelloHome</h1>

    <p>下面是水果列表,点击跳转到详情页面</p>
    <ul>
      <li v-for="item in goodList" :key="item.id">
        <!-- 
          路由传参 1. 字符串
         -->
        <!-- <router-link :to="`/detail/${item.id}/${item.name}`">
          {{ item.name }}
        </router-link> -->

        <!-- 
          路由传参 2. 对象形式,通过 params 属性传递
         -->
        <!-- <router-link
          :to="{
            name: 'detail',
            params: {
              id: item.id,
              name: item.name
            },
          }"
        >
          {{ item.name }}
        </router-link> -->

        <div @click="goDetail(item.id, item.name)">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goodList: [
        { id: "001", name: "apple" },
        { id: "002", name: "banana" },
        { id: "003", name: "orange" },
      ],
    };
  },

  methods: {
    goDetail(id, name) {
      // 编程式 字符串
      // this.$router.push(`/detail/${id}/${name}`);

      // 编程式 对象
      this.$router.push({
        name: "detail",
        params: {
          id,
          name,
        },
      });
    },
  },
};
</script>
